<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="../hanshunping/js/vue.js"></script>
</head>

<!--
v-for: 列表渲染，遍历容器的元素或者对象的属性
语法：
<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>
注意：
1. 需要循环那个标签，`v-for` 指令就写在那个标签上。
2. 如果在页面需要使用到集合模型数据的索引，就需要使用如下格式：
索引变量是从0开始，所以要表示序号的话，需要手动的加1
<标签 v-for="(变量名,索引变量) in 集合模型数据">
    {{索引变量 + 1}} {{变量名}}
</标签>
-->

<body>
<div id="app">

    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>
    <hr>
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>
</div>
<script>
    //1.创建Vue核心对象
    new Vue({
            el:"#app",
            data(){
                return{
                    addrs:["北京","上海","广州","深圳"]
                }
            }
        });
</script>
</body>
</html>